@import "./common/s_config";
.containt-box{
    margin:30px auto 16px auto;
    width:1200px;
    @extend .clearfix;
}
.containtBox{
    border: 1px solid #ddd;
    padding: 0 40px 50px 40px;
    background: #fff;
    min-height: 757px;
}
.account-name{
    margin:0 auto 20px auto;
    padding-left:40px;
    width:1160px;
    height: 100px;
    background: url("https://r.mzmoney.com/mz/img/hpimg/member/memberPandect/member-pandectbg.png");
    background-size: 100% 100%;
    img{
        float: left;
        margin-top: 25px;
        width:52px;
        height: 52px;
    }
    .edit-name{
        float: left;
        margin-left:20px;
        padding-top:27px;
        text-align: left;
        font-size: 12px;
        color: #ccc;
        p{
            color: #fff;
        }
        .edit{
            font-size:18px;
            color: #ffffff;
            .name-box{
                padding-top:4px;
                color: #fff;
            }
            input[type="text"]{
                border:none;
                border-bottom:1px solid #fff;
                width:100px;
                height: 28px;
                line-height:28px;
                background: transparent;
                font-size:18px;
                color: #ffffff;
            }
            a{
                margin-left:13px;
                font-size:14px;
                color: #fff;
                line-height:28px;
            }
            .edit-btn{
                margin-left:22px;
                display: inline-block;
                width:18px;
                height:18px;
                background: url("https://r.mzmoney.com/mz/img/hpimg/member/memberPandect/edit.png");
                background-size: 100% 100%;
                vertical-align: middle;
            }
            .error{
                display: block;
                font-size:12px;
                color: #f76867;
            }

        }
    }
    .safe-grade{
        float: right;
        padding-top:20px;
        width:152px;
        h3{
            padding-bottom:12px;
            font-size:12px;
            color: #ccc;
            text-align: left;
            span{
                color: #f76867;
            }
        }
        ul{
            position: relative;
            width:152px;
            @extend .clearfix;
            li{
                float: left;
                margin-right:6px;
                padding-bottom:2px;
                width:24px;
                height:24px;
                p{
                    display: none;
                    position: absolute;
                    left:-16px;
                    bottom:-20px;
                    padding:0 4px;
                    border-radius: 4px;
                    width:auto;
                    height:20px;
                    line-height:20px;
                    font-size:12px;
                    color: #999999;
                    background: #fff;
                    cursor: default;
                    a{
                        padding-left:3px;
                        color: #f76867;
                    }
                }
                &:hover{
                    p{
                        display:block;
                    }
                }
            }
            li.tel-check{
                background: url("https://r.mzmoney.com/mz/img/hpimg/member/memberPandect/tel-check.png") left top no-repeat;
            }
            li.name-check{
                background: url("https://r.mzmoney.com/mz/img/hpimg/member/memberPandect/name-check.png") left top no-repeat;
                p{
                    left: -29px !important;
                }
            }
            li.password-check{
                background: url("https://r.mzmoney.com/mz/img/hpimg/member/memberPandect/password-check.png") left top no-repeat;
            }
            li.safe-check{
                background: url("https://r.mzmoney.com/mz/img/hpimg/member/memberPandect/safe-check.png") left top no-repeat;
            }
            li.checked:nth-child(1){
                background: url("https://r.mzmoney.com/mz/img/hpimg/member/memberPandect/tel-checked.png") left top no-repeat;
            }
            .checked:first-child{
                background: url("https://r.mzmoney.com/mz/img/hpimg/member/memberPandect/tel-checked.png") left top no-repeat;
            }
            li.checked:nth-child(2){
                background: url("https://r.mzmoney.com/mz/img/hpimg/member/memberPandect/name-checked.png") left top no-repeat;
            }
            .checked:first-child+.checked{
                background: url("https://r.mzmoney.com/mz/img/hpimg/member/memberPandect/name-checked.png") left top no-repeat;
            }
            li.checked:nth-child(3){
                background: url("https://r.mzmoney.com/mz/img/hpimg/member/memberPandect/password-checked.png") left top no-repeat;
            }
            .checked:first-child+.checked+.checked{
                background: url("https://r.mzmoney.com/mz/img/hpimg/member/memberPandect/password-checked.png") left top no-repeat;
            }
            li.checked:nth-child(4){
                background: url("https://r.mzmoney.com/mz/img/hpimg/member/memberPandect/safe-checked.png") left top no-repeat;
            }
            .checked:first-child+.checked+.checked+.checked{
                background: url("https://r.mzmoney.com/mz/img/hpimg/member/memberPandect/safe-checked.png") left top no-repeat;
            }
        }
    }
}
/*个人中心右侧账户总览*/
.containt-right{
    .partBox{
        margin-bottom:18px
    ;
        padding:0 40px;
        border:1px solid #dddddd;
        background: #fff;
        width: 908px;
    }
    .account-total{
        padding:0 40px;
        border:1px solid #dddddd;
        background: #fff;
        width: 908px;
        h3{
            border-bottom:1px solid #eee;
            line-height: 54px;
            font-size:16px;
            color: #333;
        }
        .asset-box{
            padding:30px 0 38px 0;
            width:100%;
            .asset-total{
                padding-right: 40px;
                width:100%;
                background: url("https://r.mzmoney.com/mz/img/hpimg/member/memberPandect/member-indexbg.png") 636px center no-repeat;
                .right{
                    float: left;
                    margin-left: 20px;
                    position: relative;
                    width: 164px;
                    height: 164px;
                    overflow: hidden;
                    .asset-number{
                        position: absolute;
                        top:0;
                        left: 0;
                        width:100%;
                        height:100%;
                        text-align: center;
                        p{
                            margin:0 auto;
                            padding-top:55px;
                            padding-bottom:14px;
                            text-align: center;
                            font-size:12px;
                            color: #999;
                        }
                        span{
                            display: inline-block;
                            font-size: 20px;
                            color: #f76867;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            -o-text-overflow: ellipsis;
                            font-weight: normal;
                            max-width: 130px;
                        }
                    }
                }
                .caption{
                    padding-top:24px;
                    float: left;
                    margin-left:60px;
                    p{
                        padding-bottom:14px;
                        font-size:14px;
                        color: #999999;
                        text-align: left;
                        em{
                            display: inline-block;
                            width:85px;
                        }
                        i{
                            margin-right:10px;
                            display: inline-block;
                            border-radius: 4px;
                            width:14px;
                            height: 14px;
                            vertical-align: middle;
                        }
                        span{
                            display: inline-block;
                            padding-left: 37px;
                            font-size:16px;
                            color: #333;
                            vertical-align: middle;
                        }
                    }
                    p.wait-profit{
                        i{
                            background: #f7505c;
                        }
                    }
                    p.can-use{
                        i{
                            background: #00acea;
                        }
                    }
                    p.apply{
                        i{
                            background: #f7aa50;
                        }
                    }
                    a{
                        display: inline-block;
                        margin-right:20px;
                        border-radius: 4px;
                        border:1px solid #dddddd;
                        width:138px;
                        height:33px;
                        line-height: 33px;
                        text-align: center;
                        font-size:14px;
                    }
                    a.deposit{
                        color: #f76867;
                        &:hover{
                            border:1px solid #f76867;
                            background: #f76867;
                            color: #fff;
                            animation:depositColor 0.5s linear;
                            -webkit-animation:depositColor 0.5s linear;
                        }
                    }
                    a.widthdraw{
                        color: #00acea;
                        &:hover{
                            animation:widthdrawColor 0.5s linear;
                            -webkit-animation:widthdrawColor 0.5s linear;
                            border:1px solid #00acea;
                            background: #00acea;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
    .asset-detail{
        margin-top:-1px;
        margin-bottom:18px;
        border-top:1px solid #eee;
        border-right:1px solid #ddd;
        border-bottom:1px solid #ddd;
        border-left:1px solid #ddd;
        padding:9px 0;
        width:990px;
        background: #fff;
        li{
            float: left;
            width:328px;
            height:100px;
            text-align: center;
            p{
                padding-top:26px;
                padding-bottom:20px;
                font-size:20px;
                color: #333;
            }
            span{
                font-size:14px;
                color: #999999;
            }
        }
        li.total-profit,li.wait-get{
            border-right:1px solid #eee;
        }
        .my-invest{
            margin-right:20px;
            border:1px solid #dddddd;
            padding:0 0 30px 0;
            width:988px;
            background: #fff;
        }
    }
    .account-detail {
        border:1px solid #ddd;
        background: #fff;
        .card-info{
            margin-right:0;
            width:332px;
            h3{
                background: url("https://r.mzmoney.com/mz/img/hpimg/member/memberPandect/my-account.png") left center no-repeat;
            }
        }
        .my-invest{
            .title{
                position: relative;
                padding:0 38px;
                height:54px;
                line-height: 54px;
                font-size:16px;
                color: #333;
                text-align: left;
                &::after{
                    position: absolute;
                    left:38px;
                    bottom:0;
                    width:912px;
                    height: 1px;
                    background: #eee;
                    content: '';
                }
            }
            .top{
                padding:0 58px;
                position: relative;
                display: block;
                height:52px;
                line-height: 52px;
                font-size:12px;
                color: #666;
                &::after{
                    position: absolute;
                    left:38px;
                    bottom:0;
                    content: "";
                    width:912px;
                    height:1px;
                    border-bottom: 1px solid #eee;
                }
            }
            .bottom{
                display: block;
                padding:18px 58px;
                color: #666;
                &:hover{
                    color: #666666;
                }
            }
            div{
                &:hover{
                    animation: investColor 0.5s linear;
                    -webkit-animation: investColor  0.5s linear;
                    background: #f4f4f4;
                }
            }
            div p,a p{
                float: right;
                font-size:12px;
                color: #999999;
            }
            div p .look-more,a p .look-more{
                margin-left:30px;
                color: #f76867;
                font-size:12px;
                cursor: pointer;
            }
        }

    }
    .account-info{
        position: relative;
        margin-top:-1px;
        padding-bottom: 35px !important;
        border-top:none !important;
        text-align: right;
        &::after {
            position: absolute;
            top: 0;
            left: 38px;
            border-top: 1px solid #eee;
            width: 912px;
            height: 1px;
            content: '';
        }
        .account-title{
            height: 57px !important;
            line-height: 57px !important;
        }
        a{
            margin-top:30px;
            display: inline-block;
            border-radius: 8px;
            border:1px solid #ddd;
            width:200px;
            overflow: hidden;
            h3{
                padding-left:17px;
                border-bottom:1px solid #DDDDDD;
                height: 34px;
                line-height: 34px;
                text-align: left;
                background: #fff;
                font-size:12px;
                color: #999999;
            }
            p{
                padding-right:26px;
                height: 58px;
                line-height: 58px;
                width:174px;
                span{
                    padding:0 6px;
                    color: #f76867;
                    font-size:14px;
                }
            }
            &:hover{
                animation: borderChange 0.5s linear;
                -webkit-animation: borderChange 0.5s linear;
                border:1px solid #f76867;
                h3{
                    animation: h3Change 0.5s linear;
                    -webkit-animation: h3Change 0.5s linear;
                    background: #f76867;
                    color: #fff;
                }
            }
        }
        .bankCard{
            p{
                background: url("https://r.mzmoney.com/mz/img/hpimg/member/memberPandect/bank.png") 143px center no-repeat #f4f4f4;
            }
        }
        .coupon{
            p{
                background: url("https://r.mzmoney.com/mz/img/hpimg/member/memberPandect/coupon.png") 140px center no-repeat #f4f4f4;
            }
        }
        a.coupon{
            margin-right:38px;
            margin-left:26px;

        }
    }

}

@keyframes depositColor{
    from {background-color:#fff;color:#f76867;border:1px solid #ddd;}
    to{background-color:#f76867;color:#fff;border:1px solid #f76867;}
}
@keyframes widthdrawColor{
    from {background-color:#fff;color:#00acea;border:1px solid #ddd;}
    to{background-color:#00acea;color:#fff;border:1px solid #00acea;}
}

@keyframes investColor {
    from {background-color: #fff}
    to {background-color:#f4f4f4 }
}
@keyframes borderChange {
    from {border:1px solid #ddd;}
    to {border:1px solid #f76867;}
}
@keyframes h3Change{
    from {background-color: #fff;color:#666666;}
    to {background: #f76867;color: #fff;}
}
